iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
1
Modern Web

試著把切版專案升級到 gulp4.0 吧系列 第 17

[試著把切版專案升級到 gulp4.0 吧] Day17 HTML、EJS 的處理:$ 是萬能的,談 gulp-load-plugins

  • 分享至 

  • xImage
  •  

在 Day14 中,曾經談過怎麼處理 EJS 模板,並轉成瀏覽器看得懂的 HTML。不過在 gulpfile.bable.js 檔中,竟然沒有 import 進 gulp-front-matter、gulp-layout 等處理 front matter 與 EJS 的套件,為什麼呢?

這是因為,有錢什麼都辦得到 有 gulp-load-pluins 套件的幫忙。

gulp-load-pluins 的功能與使用方式

先來看看 npm 頁面的簡介吧:

Loads gulp plugins from package dependencies and attaches them to an object of your choice.

簡單說就是,在專案中 npm install 了套件後,就能在 gulpfile 設定檔案中更方便地引用這些套件。具體來說,要怎麼使用呢?同樣以 Day14 的展示為例吧:

一、npm install 為了處理 front matter 與 EJS 所需要的套件

npm install ejs --save-dev # 因為該專案用 EJS 樣板語言來寫 HTML,所以裝它
npm install gulp-front-matter --save-dev # 可以幫每頁 HTML 個別設定變數,好用
npm install gulp-layout --save-dev # 可以先接收 front-matter 傳來的值,然後傳到 EJS 模板接收變數,再轉成 HTML

二、在平常的使用下,需要用 importrequire 語法,引入套件後才能使用它們

import gulp from 'gulp'
import frontMatter from 'gulp-front-matter'
import layout from 'gulp-layout'

export function ejs() {
  return  gulp.src(['./source/**/*.ejs', './source/**/*.html'])
    .pipe(frontMatter())
    .pipe(
      layout((file) => {
        return file.frontMatter;
      }),
    )
    .pipe(gulp.dest('./public'))
}

三、不過,若有一拖拉庫的 gulp 套件需要引入的話,就要 import 很多次,gulpfile 就會變得繁雜。這時,就可以 npm install gulp-load-pluins 這個套件

npm install gulp-load-pluins --save-dev

四、然後神奇的事就發生了。我們可以在開頭先設定好 gulp-load-plugins 的相關設定,將所有 gulp- 開頭的套件都引入 $ 這個變數當中,這樣以後就不用在開頭一直 import / require 套件,而可以用 $.套件的名字 來使用套件提供的函式啦。

import gulp from 'gulp'
import gulpLoadPlugins from 'gulp-load-plugins'
const $ = gulpLoadPlugins()

export function ejs() {
  return  gulp.src(['./source/**/*.ejs', './source/**/*.html'])
    .pipe($.frontMatter())
    .pipe(
      $.layout((file) => {
        return file.frontMatter;
      }),
    )
    .pipe(gulp.dest('./public'))
}

講解了 Day14 的設定是怎麼做的之後,再根據官方的例子做些改寫來加深記憶。以下這三段程式碼是等效的:

// 一、在 gulpfile 中,預設是這樣引入套件
const gulp = require('gulp');
const jshint = require('gulp-jshint');
const concat = require('gulp-concat');
const frontMatter = require('gulp-front-matter')
const layout = require('gulp-layout') 

jshint()
layout()
... 


// 二、但用了 gulp-load-plugins 後,在 gulpfile 中就可以不用引入那麼多的 gulp 套件,通通都從 $ 裡面去拿就好
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const $ = gulpLoadPlugins();

$.jshint()
$.layout()
...


// 三、其實用了 gulp-load-plugins 後,就像是將套件都放在 $ 裡面一樣,這樣大家就能從 $ 中取得這些 gulp 套件
const gulp = require('gulp');

let plugins = {}
$.jshint = require('gulp-jshint');
$.concat = require('gulp-concat');
$.frontMatter = require('gulp-front-matter')
$.layout = require('gulp-layout') 

$.jshint()
$.layout()
...

$ = gulpLoadPlugins() 在沒有傳入參數的情況下,會預設讀入 gulp- 開頭的所有透過 npm install 安裝的套件。其他的細節在 npm 頁面中有介紹,不過通常使用預設值應該就夠用了。

小節

今天是「HTMl、EJS 的處理」的第四天,介紹了如何用 gulp-load-plugins 減少在 gulpfile 中 import / require 的頻率,讓使用套件所需的時間成本能降低。明天開始將會介紹如何用 gulp 處理 SCSS 與 CSS。

參考資料


上一篇
[試著把切版專案升級到 gulp4.0 吧] Day16 HTML、EJS 的處理:談 gulp-front-matter 與 gulp-layout
下一篇
[試著把切版專案升級到 gulp4.0 吧] Day18 CSS 的處理
系列文
試著把切版專案升級到 gulp4.0 吧36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
gan068
iT邦新手 5 級 ‧ 2020-03-17 07:24:07
import gulpLoadPlugins from 'gulp-file-plugins'

應修正為
gulp-load-plugins

感謝提醒!
可能是當時在文章中手打程式碼時筆誤了
已修改兩處筆誤的地方 ~

我要留言

立即登入留言